import React, { Component } from 'react'
import { Spin } from "antd"
import netmap from './index.module.css'

import CameraCapture from '../../components/CameraCapture'
import RightNetMonitor from '../../components/RightNetMonitor'

// import {result} from '../../mock/result'

export default class index extends Component {
  constructor(props) {
    super(props)
    this.state = {
      result: {},
      spinning: false
    }
  }

  
  componentDidMount() {

    
  }

  componentWillUnmount(){

  }

  onSubmitPicture = (result) => {
    this.setState({
      result
    })
  }

  // 提交时的等待动画
  onSubmitLoading = (spinning) => {
    this.setState({
      spinning
    })
  }

  // 重拍时检测结果重置
  onClearPicture = () => {
    this.setState({
      result: {}
    })
  }

  render() {
    const { result, spinning } = this.state;
    // console.log(result);
    
    return (
      <div className={netmap.container}>
        <div className={netmap.container_top}>五官AI检测</div>
        <Spin spinning={spinning} tip="正在检测中...">
          <div className={netmap.container_main}>
            <div className={netmap.container_main_item}>
              <CameraCapture onSubmitPicture={this.onSubmitPicture} onSubmitLoading={this.onSubmitLoading} onClearPicture={this.onClearPicture}></CameraCapture>
            </div>
            <div className={`${netmap.container_main_item} ${netmap.container_main_item_right}`}>
              <RightNetMonitor result={result}></RightNetMonitor>
            </div>
          </div>
        </Spin>
      </div>
    )
  }

}
